<template>
  <a-drawer
    :title="title"
    :width="800"
    placement="right"
    :closable="false"
    @close="close"
    :visible="visible"
  >

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="商家编号">
          <a-input-number placeholder="请输入商家编号" v-decorator="['id', validatorRules.id]" :disabled="editEnable"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="商家名称">
          <a-input placeholder="请输入商家名称" v-decorator="['name', validatorRules.name]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="商家品牌">
          <j-dict-select-tag v-decorator="['brandId', validatorRules.brandId]" placeholder="请选择商家品牌" :triggerChange="true" dictCode="pms_brand,name,id"/>
        </a-form-item>
        <a-form-item label="商家LOGO" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-upload
            listType="picture-card"
            class="logo-uploader"
            :showUploadList="false"
            :action="uploadAction"
            :data="{'isup':1,'dir':'sys/partner'}"
            :headers="headers"
            :beforeUpload="beforeUpload"
            @change="handleChange"
          >
            <img v-if="picUrl" :src="getLogoView()" alt="logo" style="height:104px;max-width:300px"/>
            <div v-else>
              <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传</div>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="联系电话">
          <a-input placeholder="请输入联系电话" v-decorator="['phone', {}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="手机号码">
          <a-input placeholder="请输入手机号码" v-decorator="['mobile', {}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="电子邮箱">
          <a-input placeholder="请输入电子邮箱" v-decorator="['email', {}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="联系人">
          <a-input placeholder="请输入联系人" v-decorator="['linkName', {}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="地址">
          <a-textarea :rows="3" placeholder="请输入地址" v-decorator="['address', {}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="业务线">
          <j-dict-select-tag v-decorator="['businessLine', {}]" placeholder="业务线" :type="'radioButton'"
                             :triggerChange="true" dictCode="business_line"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="商品库">
          <j-multi-select-tag v-decorator="['productPartner', {}]" placeholder="请选择商品库" dictCode="sys_partner,name,id"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="自主发货">
          <j-dict-select-tag v-decorator="['sendFlag', {}]" placeholder="自主发货" :type="'radioButton'"
                             :triggerChange="true" dictCode="yn"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="总仓代理发货">
          <j-dict-select-tag v-decorator="['generalDeliveryFlag', {}]" placeholder="总仓代理发货" :type="'radioButton'"
                             :triggerChange="true" dictCode="yn"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="认证商家">
          <j-dict-select-tag v-decorator="['authFlag', {}]" placeholder="认证商家" :type="'radioButton'"
                             :triggerChange="true" dictCode="yn"/>
        </a-form-item>
      </a-form>
    </a-spin>
    <a-button type="primary" @click="handleOk">确定</a-button>
    <a-button type="primary" @click="handleCancel">取消</a-button>
  </a-drawer>
</template>

<script>
  import { httpAction } from '@/api/manage'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import pick from 'lodash.pick'
  import moment from 'moment'
  import Vue from 'vue'
  import ATextarea from 'ant-design-vue/es/input/TextArea'
  import JMultiSelectTag from '../../../components/dict/JMultiSelectTag'

  export default {
    name: 'SysPartnerModal',
    components: {
      ATextarea,
      JMultiSelectTag,
    },
    data() {
      return {
        title: '操作',
        visible: false,
        editEnable: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },

        confirmLoading: false,
        uploadLoading:false,
        headers:{},
        picUrl: "",
        form: this.$form.createForm(this),
        validatorRules: {
          id: { rules: [{ required: true, message: '请输入商家编号!' }] },
          name: { rules: [{ required: true, message: '请输入商家名称!' }] },
          brandId: { rules: [{ required: true, message: '请选择商家品牌!' }] },
        },
        url: {
          fileUpload: window._CONFIG['domianURL']+"/sys/common/ossUpload",
          imgerver: window._CONFIG['domianURL']+"/sys/common/view",
          add: '/sys/sysPartner/add',
          edit: '/sys/sysPartner/edit'
        }
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token};
    },
    computed:{
      uploadAction:function () {
        return this.url.fileUpload;
      }
    },
    methods: {
      add() {
        this.picUrl = "";
        this.edit({})
      },
      edit(record) {
        this.form.resetFields()
        this.model = Object.assign({}, record)
        this.picUrl = this.model.logo;
        this.editEnable = true;
        if(this.model.id === undefined || this.model.id === null || this.model.id === '' ){
          this.editEnable = false;
        }
        this.visible = true
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'id', 'name', 'phone', 'mobile', 'email', 'linkName', 'address', 'businessLine', 'productPartner', 'delFlag', 'sendFlag', 'generalDeliveryFlag', 'authFlag'))
          //时间格式化
        })

      },
      beforeUpload: function(file){
        var fileType = file.type;
        if(fileType.indexOf('image')<0){
          this.$message.warning('请上传图片');
          return false;
        }
        //TODO 验证文件大小
      },
      handleChange (info) {
        this.picUrl = "";
        if (info.file.status === 'uploading') {
          this.uploadLoading = true;
          return
        }
        if (info.file.status === 'done') {
          var response = info.file.response;
          this.uploadLoading = false;
          console.log(response);
          if(response.success){
            this.model.logo = response.message;
            this.picUrl = this.model.logo;
          }else{
            this.$message.warning(response.message);
          }
        }
      },
      getLogoView(){
        if(this.model.logo !== null && this.model.logo !== undefined && this.model.logo !== ''){
          if('http' === this.model.logo.substring(0,4)){
            return this.model.logo;
          }
          return this.url.imgerver +"/"+ this.model.logo;
        }
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleOk() {
        const that = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if(this.model.id === undefined || this.model.id === null || this.model.id === '' ){
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            let formData = Object.assign(this.model, values)
            //时间格式化

            console.log(formData)
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })


          }
        })
      },
      handleCancel() {
        this.close()
      }


    }
  }
</script>

<style lang="less" scoped>
  /** Button按钮间距 */
  .ant-btn {
    margin-left: 30px;
    margin-bottom: 30px;
    float: right;
  }
  .logo-uploader > .ant-upload {
    width:104px;
    height:104px;
  }
  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>